<!--
 * Description: 报价专案分配页面
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Dongxu.Ni
 * Date: 2020/03/31 07:26
-->

<template>
  <div>
    <!--数据表单-->
    <el-form label-width="100px" :model="formData" size="mini">
      <el-row>
        <!--专案编号-->
        <el-col :span="12">
          <el-form-item label="专案编号">
            <span>{{ formData.projectId }}</span>
          </el-form-item>
        </el-col>

        <!--专案名称-->
        <el-col :span="12">
          <el-form-item label="专案名称">
            <span>{{ formData.projectName }}</span>
          </el-form-item>
        </el-col>

        <!--系列-->
        <el-col :span="12">
          <el-form-item label="系列">
            <span>{{ formData.series }}</span>
          </el-form-item>
        </el-col>

        <!--系列映射-->
        <el-col :span="12">
          <el-form-item label="系列映射">
            <span style="color: #a62625; font-size: 13px">{{ formData.mapState }}</span>
          </el-form-item>
        </el-col>

        <!--BU类型-->
        <el-col :span="12">
          <el-form-item label="BU类型">
            <span>{{ formData.bu }}</span>
          </el-form-item>
        </el-col>

        <!--创建时间列-->
        <el-col :span="12">
          <el-form-item label="创建时间">
            <span style="color: #a62625; font-size: 13px">{{ formData.createTime }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!--PBM负责人-->
        <el-col :span="12">
          <el-form-item label="PBM负责人">
            <el-select
              v-model="formData.pbmOwner"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in $store.getters['user/getSubPbmUserSimpleCollects']"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              >
                <span style="float: left;">{{ item.userName }}</span>
                <span style="float: right; color: #b4b4b4; font-size: 12px">
                  {{ item.bu + ' ' + item.team }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!--ME负责人-->
        <el-col :span="12">
          <el-form-item label="ME负责人">
            <el-select
              v-model="formData.meOwner"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in $store.getters['user/getMEGcmUserSimpleCollects']"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              >
                <span style="float: left;">{{ item.userName }}</span>
                <span style="float: right; color: #b4b4b4; font-size: 12px">
                  {{ item.gcmFunction + ' ' + item.team }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!--EE负责人-->
        <el-col :span="12">
          <el-form-item label="EE负责人">
            <el-select
              v-model="formData.eeOwner"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in $store.getters['user/getEEGcmUserSimpleCollects']"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              >
                <span style="float: left;">{{ item.userName }}</span>
                <span style="float: right; color: #b4b4b4; font-size: 12px">
                  {{ item.gcmFunction + ' ' + item.team }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!--PKG负责人-->
        <el-col :span="12">
          <el-form-item label="PKG负责人">
            <el-select
              v-model="formData.pkgOwner"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in $store.getters['user/getPKGGcmUserSimpleCollects']"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              >
                <span style="float: left;">{{ item.userName }}</span>
                <span style="float: right; color: #b4b4b4; font-size: 12px">
                  {{ item.gcmFunction + ' ' + item.team }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span style="display: block;text-align: center;margin-top: 5px">
      <!--取消按钮-->
      <el-button size="medium" @click="cancel">{{ $t('button.cancel') }}</el-button>
      <!--保存按钮-->
      <el-button size="medium" type="primary" @click="save">{{ $t('button.save') }}</el-button>
    </span>
  </div>
</template>

<script>
import { projectAssign } from '@/api/quote/project'

export default {
  name: 'ProjectAssignDialog',
  props: {
    inputData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      formData: {}
    }
  },
  computed: {},
  watch: {},
  created() {
    this.pageDataInit()
  },
  mounted() {},
  methods: {
    pageDataInit() {
      // 将props传入的值复制给formData的值
      const projectObj = JSON.parse(JSON.stringify(this.inputData))
      const seriesObj = this.$store.getters['series/getSeriesById'](projectObj.series)
      if (seriesObj) {
        projectObj.mapState = '存在映射关系'
        projectObj.meOwner = seriesObj.meOwner
        projectObj.eeOwner = seriesObj.eeOwner
        projectObj.pkgOwner = seriesObj.pkgOwner
      } else {
        projectObj.mapState = '映射关系不存在'
      }
      this.formData = projectObj
    },
    save() {
      this.$confirmBox(this.$t('button.save'), 'success')
        .then(() => {
          projectAssign(this.formData, { msgSuccess: true, msgError: true }).then(() => {
            this.$emit('save')
          })
        })
        .catch(cancel => cancel)
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped>
.el-form-item__content span {
  margin-left: 5px;
  color: blue;
}
</style>
